<template>
    <div class="task">
        <div class="task_btn">
            <!-- <el-button @click="add_feed">添加反馈</el-button> -->
            <div class="search">
                <input type="text" v-model="search">
                <button>搜索</button>
            </div>
        </div>
        <el-table
        :data="tableData"
        border
        class="task_table"
        @selection-change="handleSelectionChange"
        style="width: 100%">
            <el-table-column
            prop="date"
            label="任务列表名称"
            width="350">
            </el-table-column>
            <el-table-column
            prop="name"
            label="处理日期"
            width="200">
            </el-table-column>
            <el-table-column
            prop="province"
            label="处理单位"
            width="250">
            </el-table-column>
            <el-table-column
            prop="city"
            label="创建时间"
            width="200">
            </el-table-column>
            <el-table-column
            prop="address"
            label="状态"
            width="150">
            </el-table-column>
            <el-table-column
            prop="address"
            label="反馈结果"
            width="">
            </el-table-column>
            <el-table-column
            fixed="right"
            label="操作"
            width="150">
            <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <el-button type="text" size="small" style="color:#31bdce" @click="edit(scope.row)">回复</el-button>
                <el-button type="text" size="small" style="color:#f56c6c" @click="deleted(scope.row)">删除</el-button>
            </template>
            </el-table-column>
        </el-table>
        <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage1"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, prev, pager, next"
        style="text-align: right;margin-top:15px"
        :total="400">
        </el-pagination>

        <!-- 查看详情 -->
        <el-drawer
        title="我是标题"
        :visible.sync="drawer"
        
        class="drawer"
        :with-header="false">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="项目名称:" prop="username">
                <p>项目名称</p>
            </el-form-item>
            <el-form-item label="任务类型:" prop="type">
                <p>任务类型</p>
            </el-form-item>
            <el-form-item label="计划日期:" prop="date">
                <p>2021-9-9 至 2021-10-10</p>
            </el-form-item>
            <el-form-item label="选择单位:" prop="company">
                <p>选择单位</p>
            </el-form-item>
            <el-form-item label="联系电话:" prop="phone">
                <p>15505057569</p>
            </el-form-item>
            <el-form-item label="上传图片:" class="uppic">
                <el-upload
                action="#"
                list-type="picture-card"
                :file-list="fileList"
                :auto-upload="false">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                    <img
                        class="el-upload-list__item-thumbnail"
                        :src="file.url" alt=""
                    >
                    <span class="el-upload-list__item-actions" >
                        <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                        >
                        <i class="el-icon-zoom-in"></i>
                        </span>
                    </span>
                    </div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible" :append-to-body="true" :modal-append-to-body="false">
                <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item label="上传视频:" class="uppic">
                <div class="wrap">
                    <video src="movie.ogg" controls="controls"></video>
                </div>
            </el-form-item>
        </el-form>
        </el-drawer>
    </div>
</template>

<script>
export default {
    data(){
        return{
            search:'',
            tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: ' 1518 弄',
            zip: 250333
            }, {
            date: '2016-05-04',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: ' 1517 弄',
            zip: 250333
            }, {
            date: '2016-05-01',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: ' 1519 弄',
            zip: 200333
            }, {
            date: '2016-05-03',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: ' 1516 弄',
            zip: 200333
            }],
            currentPage1: 1,
            currentPage2: 2,
            currentPage3: 3,
            currentPage4: 4,
            drawer:false,
            // 详情
            ruleForm: {
                username:'',
                type: '',
                date: '',
                company: ''
            },
            rules: {
                
            },
            optionsd:[],
            options:[],
            dialogVisible:false,
            dialogImageUrl:'',
            fileList: [{name: 'food.jpg', url: 'https://gifts-1027411-pic45.websiteonline.cn/upload/bb.jpg'}],
            // 任务id
            rowId:'',
        }
    },
    created(){
        
    },
    methods:{
        // 新增
        add_feed(){
            this.$router.push('/feedback')
        },
        // 表格操作
        handleClick(row) {
            console.log(row);
            this.drawer = true
            this.dialogImageUrl = 'https://gifts-1027411-pic45.websiteonline.cn/upload/bb.jpg'
        },
        edit(row) {
            console.log(row);
            this.rowId = row.id
            this.$router.push('/feedback')
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 删除
        deleted(val) {
            console.log(val)
            this.$confirm('此操作将永久删除该任务, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        // 上传视频
        handlePictureCardPreview(file){
            console.log(file)
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        }
    }
}
</script>

<style lang="scss" scoped>
.task_btn{
    padding: 0 15px;
    padding-bottom: 40px;
}
.task_btn button{
    background-color: #31bdce;
    color: white;
}
.search{
    float: right;
    font-size: 0;
    border: 1px solid #ccc;
}
.search input{
    height: 36px;
    vertical-align: top;
    border: 0;
    outline: none;
    padding: 0 7px;
    font-size: 14px;
}
.search button{
    height: 36px;
    border: 0;
    padding: 0 20px;
}
.task_table::v-deep{
    margin-top: 30px;
    box-sizing: border-box;
}
.el-pagination{
  font-weight: 500;
}
.drawer::v-deep{
    .el-drawer{
        width: 60% !important;
    }
}
.demo-ruleForm::v-deep{
    margin-top: 15px;
    padding:50px 30px !important;
    background-color: white;
    padding: 40px 0;
    .el-form-item{
        display: inline-block;
        width: 500px;
        margin-bottom: 30px;
    }
    .uppic{
        display: block;
        width: 100%;
        .el-upload-list__item{
            div{
                height: 146px;
            }
        }
    }
    .el-select{
        width: 100%;
    }
    .el-upload{
        display: none;
    }
}
.wrap{
    width:70%;
    position:relative;
    // padding-bottom:62%;    /*需要用padding来维持16:9比例,也就是9除以16*/
    height: 400px;
    video{
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%
    }
}

</style>